<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<style>
    .carousel,.carouselc,.lectureVideoC1{
        width: 100%;
        margin-top: 10px;
    }
    .carousel img,.carouselc img,.lectureVideoC1 img{
        margin-right: 10px;
    }

    .carouselVideo,.carouselVideod,.lecturePictureC1{
        margin-top: 20px;
    }
    .carouselVideo video,.carouselVideod video,.lecturePictureC1 video{
        margin-bottom: 20px;
        width: 100% !important;
        height: initial !important;
    }

    .print{
        width: 100%;
        margin-bottom: 20px;
    }
    .print img{
        width: 100%;
    }

    .carousel video,
    .carouselVideo video{
        width: 100%;
    }

     .carouselc{
         width: 100%;
     }

    .carouselc video {
        width: 100%;
    }

</style>
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12" style="float: initial">
            <div class="ibox float-e-margins">
                <div class="ibox-content">

                    <div class="col-sm-12" style="float: initial">
                        <div id="b">
                            <p>1.生活照护模块:</p>
                            <div class="carousel"></div>
                            <p>2.安全照护模块</p>
                            <div class="carouselVideo"></div>
                        </div>

                        <div id="c">
                            <p>1.故事讲述模块</p>
                            <div class="carouselc"></div>
                            <p>2.韵律活动组织模块</p>
                            <div class="carouselVideod"></div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script>

    $(function (){
        let row = JSON.parse(sessionStorage.getItem('row'));
        let str;
        switch ( row.type ){
            case 1: present(row.scoingb1img,row.scoingb1smp4,row.scoingc1img,row.scoingc1smp4);break;
            case 2: present(row.scoingb2img,row.scoingb2smp4,row.scoingc2img,row.scoingc2smp4);break;
            case 3: present(row.scoingb3img,row.scoingb3smp4,row.scoingc3img,row.scoingc3smp4);break;
            case 4: present(row.scoingb4img,row.scoingb4smp4,row.scoingc4img,row.scoingc4smp4);break;
            case 5: present(row.scoingb5img,row.scoingb5smp4,row.scoingc5img,row.scoingc5smp4);break;
        }

        function present(smp,svip,csmp,csvip){
            if(row.court == 'b'){
                $("#c").hide();
                if( smp ){
                    smp = JSON.parse(smp);
                    str = `<div class="print"><img src="${smp.print}"></div>`;
                    str += `<video controls autoplay name="media">
                                <source src="${smp.svip}" type="video/mp4">
                            </video>`;
                    $(".carousel").html(str);
                }

                str = '';
                if(svip){
                    svip = JSON.parse(svip);
                    str = `<div class="print"><img src="${svip.print}"></div>`;
                    str += `<video controls autoplay name="media">
                                <source src="${svip.svip}" type="video/mp4">
                            </video>`;
                    $(".carouselVideo").html(str);
                }

            }
            else if(row.court == 'c'){
                $("#b").hide();
                console.log(csmp);
                if( csmp ){
                    csmp = JSON.parse(csmp);
                    str = `<div class="print"><img src="${csmp.print}"></div>`;
                    str += `<video controls autoplay name="media">
                                <source src="${csmp.svip}" type="video/mp4">
                            </video>`;
                    $(".carouselc").html(str);
                }

                str = '';
                if(csvip){
                    csvip = JSON.parse(csvip);
                    str = `<div class="print"><img src="${csvip.print}"></div>`;
                    str += `<video controls autoplay name="media">
                                <source src="${csvip.svip}" type="video/mp4">
                            </video>`;
                    $(".carouselVideod").html(str);
                }
            }
        }

        // let str = '';
        // let boxImg;
        // if( obj.b != undefined && obj.b != null ){
        //     boxImg = obj.b.split(',');
        //     boxImg.map(function (val){
        //         str += `<img src="${val}" width="150">`
        //     })
        //     $(".carousel").html(str);
        // }
        // console.log(obj)
        // str = '';
        // if( obj.a != undefined && obj.a != null ){
        //     boxImg = obj.a.split(',');
        //     boxImg.map(function (val){
        //         str += `<video controls autoplay name="media">
        //                     <source src="${val}" type="video/mp4">
        //                 </video>`
        //     })
        //     $(".carouselVideo").html(str);
        // }
        //
        // str = '';
        // if( obj.d != undefined && obj.d != null ){
        //     boxImg = obj.d.split(',');
        //     boxImg.map(function (val){
        //         str += `<img src="${val}" width="150">`
        //     })
        //     $(".carouselc").html(str);
        // }
        //
        // str = '';
        // if( obj.c != undefined && obj.c != null ){
        //     boxImg = obj.c.split(',');
        //     boxImg.map(function (val){
        //         str += `<video controls autoplay name="media">
        //                     <source src="${val}" type="video/mp4">
        //                 </video>`
        //     })
        //     $(".carouselVideod").html(str);
        // }
        //
        // str = '';
        // if( obj.e != undefined && obj.e != null ){
        //     boxImg = obj.e.split(',');
        //     boxImg.map(function (val){
        //         str += `<img src="${val}" width="150">`
        //     })
        //     $(".lectureVideoC1").html(str);
        // }
        //
        // str = '';
        // if( obj.f != undefined && obj.f != null){
        //     boxImg = obj.f.split(',');
        //     boxImg.map(function (val){
        //         str += `<video controls autoplay name="media">
        //                     <source src="${val}" type="video/mp4">
        //                 </video>`
        //     })
        //     $(".lecturePictureC1").html(str);
        // }


    })

</script>
</body>
</html>
